<template>
  <div class="component-upload-video">
    <div
      v-if="docList.length < limit"
      class="plugin-video"
    >
      <div
        tabindex="0"
        class="el-upload el-upload--text"
        @click.prevent.stop="docboxHandle"
      >
        <el-icon
          size="20"
          color="#999"
        >
          <Plus />
        </el-icon>
      </div>
    </div>

    <div class="doc-list">
      <div
        v-for="(item, index) in docList"
        :key="index"
        class="list-item"
      >
        <span style="padding-right: 10px">{{ item.name }}</span>
        <el-icon
          style="color: red"
          @click="deleteImg(index)"
        >
          <Delete />
        </el-icon>
      </div>
    </div>

    <!-- 弹窗, 新增视频 -->
    <doc-box
      v-if="boxVisible"
      ref="docboxRef"
      @refresh-pic="refreshPic"
    />
  </div>
</template>

<script setup>
import DocBox from '@/components/doc-box/index.vue'

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    default: () => ([]),
    type: Array
  },
  limit: {
    default: 1,
    type: Number
  }
})

const docList = computed(() => {
  const value = props.modelValue
  return value
})

// 打开选择窗
const boxVisible = ref(false)
const docboxRef = ref(null)
const docboxHandle = () => {
  const num = props.limit - docList.value.length
  if (num < 1) {
    return
  }
  boxVisible.value = true
  nextTick(() => {
    const type = props.limit == 1 ? 1 : 2
    docboxRef.value?.init(type, num)
  })
}

const refreshPic = (docs) => {
  const path = docs.map(d => {
    return {
      url: d.filePath,
      name: d.fileName
    }
  })
  emit('update:modelValue', props.limit > 1 ? docList.value.concat(path) : path)
}
const deleteImg = (i) => {
  const list = docList.value
  list.splice(i, 1)
  emit('update:modelValue', list)
}
const error = () => {
  emit('update:modelValue', [])
}
</script>

<style lang="scss" scoped>
.plugin-video {
  display: inline-block;
  width: auto;
  vertical-align: bottom;
  .el-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    width: 30px;
    max-width: 300px;
    height: auto;
    height: 30px;
    max-height: 250px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .video {
      width: auto;
      max-width: 300px;
      height: auto;
      max-height: 250px;
      display: block;
    }
    .el-upload:hover {
      border-color: #409eff;
    }
  }
}

.list-item{
  cursor: pointer;
}
</style>
